<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>HTML5的新特性</title>
    <style>
      header,
      nav {
        height: 120px;
        width: 800px;
        background-color: pink;
        border-radius: 15px;
        margin: 15px auto;
      }

      section {
        width: 500px;
        height: 300px;
        background-color: skyblue;
        border-radius: 15px;
      }

      video {
        width: 800px;
        height: 500px;
        margin: 200px;
      }

      /* 新增的表单属性 */
      input::placeholder {
        color: pink;
      }
    </style>
  </head>
  <body>
    <!-- 
     HTML5新增的语义化标签
     <header></header> : 头部标签
     <nav></nav>       ：导航标签
     <article></article>：内容标签
     <section></section>：定义文档某个区域
     <aside></aside>    ：侧边标签
     <footer></footer>  ：尾部标签
     注意：
       这些语义化标准主要针对搜索引擎的
       这些新标签页面中可以使用多次
       在IE9中，需要把这些元素转换为块级元素
       其实，移动端更喜欢使用这些标签

     HTML5新增的多媒体标签
       主要包含两个：
       1.音频：<audio src=""></audio>
       2.视频：<video src=""></video>
    使用它们可以很方便地在页面中嵌入音频和视频，而不再去使用flash和其他浏览器插件
    详细信息见学习总结图片

       
     -->

    <!-- <header>头部标签</header>
    <nav>导航栏标签</nav>
    <section>某个区域</section> -->

    <!-- 视频 -->
    <!-- <video
      src="../video/雷神.mp4"
      autoplay="autoplay"
      muted="muted"
      controls="controls"
      loop="loop"
      poster="../image/image1.00.webp"
    ></video> -->

    <!-- 音频 -->
    <!-- <audio
      src="../audio/陈雪凝 - 绿色.mp3"
      autoplay="autoplay"
      controls="controls"
    ></audio> -->

    <!-- input类型 -->
    <!-- 我们验证的时候必须添加form表单域 -->
    <!-- <form action="">
      <ul>
        <li>邮箱: <input type="email" /></li>
        <li>网址: <input type="url" /></li>
        <li>日期: <input type="date" /></li>
        <li>日期: <input type="time" /></li>
        <li>数量: <input type="number" /></li>
        <li>手机号码: <input type="tel" /></li>
        <li>搜索: <input type="search" /></li>
        <li>颜色: <input type="color" /></li>
        当我们点击提交按钮就可以验证表单了 -->
    <!-- <li><input type="submit" value="提交" /></li>
      </ul>
    </form> -->

    <!-- 新增的表单属性 -->
    <form action="">
      <input
        type="search"
        name="sear"
        id=""
        required="required"
        placeholder="影"
        autofocus="autofocus"
        autocomplete="off"
      />
      <br />
      <input type="file" name="" id="" multiple="multple" />
      <br />
      <input type="submit" value="提交" />
    </form>
  </body>
</html>
